<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <div style="font-size: 20px; color: white; width: 100%; text-align: left">
      节目单设置
    </div>
    <div
      style="
        width: 100%;
        flex: 1;
        margin-top: 10px;
        border-radius: 10px;
        background: #1c1c1c;
        border: solid 2px #404040;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          width: 95%;
          margin: 20px 0;
          justify-content: space-between;
        "
      >
        <div style="display: flex; align-items: center">
          <!-- <button
            @click="changeFilter(0)"
            style="
              cursor: pointer;
              color: #f5fcfa;
              width: 100px;
              height: 40px;
              border-radius: 10px;
            "
            :style="{
              background: filter == 0 ? '#27C48F' : '#1D2422',
              border: filter == 0 ? 'solid 2px #A8FFE1' : 'solid 2px #2D5246',
            }"
          >
            全部
          </button> -->
          <button
            @click="changeFilter(1)"
            style="
              cursor: pointer;
              color: #f5fcfa;
              width: 100px;
              height: 40px;
              border-radius: 10px;
              margin-left: 10px;
            "
            :style="{
              background: filter == 1 ? '#27C48F' : '#1D2422',
              border: filter == 1 ? 'solid 2px #A8FFE1' : 'solid 2px #2D5246',
            }"
          >
            点播节目单
          </button>
          <button
            @click="changeFilter(2)"
            style="
              cursor: pointer;
              color: #f5fcfa;
              width: 100px;
              height: 40px;
              border-radius: 10px;
              margin-left: 10px;
            "
            :style="{
              background: filter == 2 ? '#27C48F' : '#1D2422',
              border: filter == 2 ? 'solid 2px #A8FFE1' : 'solid 2px #2D5246',
            }"
          >
            计划节目单
          </button>
        </div>
        <div style="display: flex; align-items: center">
          <div
            @click="changeRouter(2)"
            style="display: flex; align-items: center; cursor: pointer"
          >
            <img
              src="../assets/添加.png"
              style="width: 15px; height: 15px; margin: 0 10px"
              alt=""
            />
            <div style="color: #f5fcfa">计划节目单</div>
          </div>
          <div
            @click="changeRouter(1)"
            style="display: flex; align-items: center; cursor: pointer"
          >
            <img
              src="../assets/添加.png"
              style="width: 15px; height: 15px; margin: 0 10px"
              alt=""
            />
            <div style="color: #f5fcfa">点播节目单</div>
          </div>
          <div @click="deleteAllPrograms" style="display: flex; align-items: center; cursor: pointer">
            <img
              src="../assets/delete.png"
              style="width: 15px; height: 15px; margin: 0 10px"
              alt=""
            />
            <div style="color: #f5fcfa">全部删除</div>
          </div>
        </div>
      </div>
      <div
        style="
          width: 95%;
          flex: 1;
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column label="节目单名称" width="140">
            <template slot-scope="scope">
              <div style="width: 100%; display: flex; flex-direction: column">
                <div style="display: flex; align-items: center">
                  <img
                    @click="showSonProgramList(scope.$index)"
                    src="../assets/展开.png"
                    style="
                      width: 15px;
                      height: 15px;
                      margin-right: 10px;
                      cursor: pointer;
                    "
                    alt=""
                  />
                  {{ scope.row.program_name }}
                </div>
                <div
                  v-if="scope.row.showSonPrograms"
                  style="
                    width: calc(100% - 30px);
                    margin-left: 30px;
                    display: flex;
                    flex-direction: column;
                  "
                >
                  <div
                    v-for="(item, index) in scope.row.programs"
                    :key="index"
                    style="text-align: left; cursor: pointer"
                  >
                    {{ item.media }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="submitTime"
            label="创建时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="programType"
            label="节目单类型"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="资源总量" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.programs.length }}
            </template>
          </el-table-column>
          <el-table-column
            prop="pgDuration"
            label="节目时长"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="计划类型" show-overflow-tooltip>
            <template slot-scope="scope">
              {{
                scope.row.freq == 0
                  ? "单次"
                  : scope.row.freq == 1
                  ? "每日"
                  : scope.row.freq == 2
                  ? "每周"
                  : "\\"
              }}
            </template>
          </el-table-column>
          <el-table-column label="计划日期" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.days }}
            </template>
          </el-table-column>
          <el-table-column prop="time" label="启动时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="启用状态" show-overflow-tooltip>
            启用
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center">
                <img
                  @click="editResource(scope.row)"
                  src="../assets/editResource.png"
                  style="
                    width: 15px;
                    height: 15px;
                    margin-right: 10px;
                    cursor: pointer;
                  "
                  alt=""
                />
                <img
                  @click="playResource(scope)"
                  src="../assets/playResource.png"
                  style="
                    width: 15px;
                    height: 15px;
                    margin-right: 10px;
                    cursor: pointer;
                  "
                  alt=""
                />
                <img
                  @click="deleteProgressOrPlan(scope.row)"
                  src="../assets/deleteResource.png"
                  style="width: 15px; height: 15px; cursor: pointer"
                  alt=""
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      filter: 1,
      tableData: [],
    };
  },
  methods: {
    async deleteAllPrograms(){
      let res = await request({
        url:"/program/api/deleteAllProgram",
        method:"DELETE"
      })
      if (res.data.status == 200) {
        this.getProgramList()
      }
    },
    changeFilter(index) {
      this.filter = index;
      switch (index) {
        case 1:
          this.getProgramList();
          break;
        case 2:
          this.getPlanList();
          break;

        default:
          break;
      }
    },
    async deleteProgressOrPlan(item) {
      // if (item.programType == "点播") {
      let res = await request({
        url: "/program/api/deleteProgram",
        method: "POST",
        data: {
          command: 21,
          user_name: localStorage.getItem("user_name"),
          data: [
            {
              pl_id: item.id,
            },
          ],
        },
      });
      if (res.data.status == 200) {
        this.getProgramList();
      }
      // } else {
      //    let res = await request({
      //     url: "/plan/api/deletePlan",
      //     method: "POST",
      //     data: {
      //       command: 23,
      //       user_name: localStorage.getItem("user_name"),
      //       data: [
      //         {
      //           id: item.id,
      //         },
      //       ],
      //     },
      //   });
      //   if (res.data.status == 200) {
      //     this.getPlanList();
      //   }
      // }
    },
    changeRouter(index) {
      switch (index) {
        case 0:
          break;
        case 1:
          this.$router.push("/AddProgramView");
          break;
        case 2:
          this.$router.push("/PlanProgramView");
          break;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        console.log(0);
        return "row1";
      } else {
        console.log(1);
        return "row2";
      }
    },
    showSonProgramList(index) {
      this.$set(
        this.tableData[index],
        "showSonPrograms",
        !this.tableData[index].showSonPrograms
      );
      this.tableData = [...this.tableData];
    },
    async getProgramList() {
      let res = await request({
        url: "/program/api/getProgramList",
        method: "POST",
        data: {
          command: 10,
          user_name: localStorage.getItem("user_name"),
          data: [
            {
              id: -1,
              pl_id: -1,
            },
          ],
        },
      });
      if (res.data.status == 200) {
        // this.tableData = res.data.data.data;
        // for (let index = 0; index < this.tableData.length; index++) {
        //   const element = this.tableData[index];
        //   element.showSonPrograms = false;
        // }
        let arr = res.data.data.data;
        for (let index = 0; index < arr.length; index++) {
          const element = arr[index];
          element.showSonPrograms = false;
        }
        this.tableData = [...arr];
      }
    },
    async getPlanList() {
      let res = await request({
        url: "/plan/api/getPlanList",
        method: "POST",
        data: {
          command: 11,
          user_name: localStorage.getItem("user_name"),
          data: [
            {
              id: -1,
              pl_id: -1,
            },
          ],
        },
      });
      if (res.data.status == 200) {
        this.tableData = res.data.data.data;
        console.log(this.tableData);
      }
    },
  },
  mounted() {
    this.getProgramList();
  },
};
</script>

<style scoped>
/deep/ .el-table th {
  background-color: #4e605a !important;
  color: #eeeeee !important;
}
/deep/ .el-table .row1 {
  background: #1f2a26 !important;
  color: #d2e2dd !important;
}

/deep/ .el-table .row2 {
  background: #1c1d1d !important;
  color: #d2e2dd !important;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: initial !important;
}
/deep/ .el-table {
  background-color: transparent !important;
}

/* 修改表格主体区域的背景色 */
/deep/ .el-table__body {
  background-color: transparent !important;
}

/deep/ .el-table td,
.el-table th {
  border-bottom: 1px solid #25322e !important;
}

/deep/ .el-table {
  border: 1px solid #25322e !important;
}

/* 修改表头边框颜色 */
/deep/ .el-table--border th {
  border-right: 1px solid #25322e !important;
}

/* 修改表格行边框颜色 */
/deep/ .el-table--border td {
  border-right: 1px solid #25322e !important;
}
</style>